<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>商品-校园二手市场</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Noto Serif SC", "Source Han Serif SC", "SimSun",
            "Times New Roman", serif;
        }

        body {
            background-color: #f5f5f5;
            color: #333;
            line-height: 1.6;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        .container {
            width: 90%;
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 15px;
        }

        .header {
            background-color: #2c3e50;
            color: white;
            padding: 25px 0;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        }

        .header .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo h1 {
            font-size: 3rem;
            display: flex;
            align-items: center;
            font-weight: 700;
            min-width: 400px;
            letter-spacing: 2px;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
        }

        .logo i {
            margin-right: 15px;
            font-size: 1.8rem;
        }

        .logo i.fa-recycle {
            font-size: 3rem;
            margin-right: 15px;
            vertical-align: middle;
            color: #e74c3c;
        }

        .search-bar {
            flex-grow: 1;
            margin: 0 30px;
        }

        .search-bar form {
            display: flex;
            max-width: 600px;
            margin: 0 auto;
        }

        .search-bar input {
            flex-grow: 1;
            padding: 12px 20px;
            border: none;
            border-radius: 6px 0 0 6px;
            font-size: 16px;
        }

        .search-bar button {
            background-color: #e74c3c;
            color: white;
            border: none;
            width: 70px;
            padding: 12px 20px;
            border-radius: 0 6px 6px 0;
            cursor: pointer;
            font-size: 16px;
        }

        .search-bar button:hover {
            background-color: #c0392b;
        }

        .user-menu ul {
            display: flex;
            list-style: none;
        }

        .user-menu li {
            margin-left: 25px;
            min-width: 100px;
        }

        .user-menu a {
            display: flex;
            align-items: center;
            font-size: 16px;
            font-weight: 500;
            transition: color 0.3s;
            padding: 8px 0;
        }

        .user-menu a:hover {
            color: #e74c3c;
        }

        @media (max-width: 768px) {
            .header .container {
                flex-direction: column;
            }

            .logo, .search-bar, .user-menu {
                width: 100%;
                margin-bottom: 20px;
            }

            .logo h1 {
                font-size: 1.8rem;
                justify-content: center;
            }

            .user-menu ul {
                justify-content: center;
            }

            .user-menu li {
                margin: 0 15px;
            }
        }

        @media (max-width: 480px) {
            .logo h1 {
                font-size: 1.5rem;
            }

            .user-menu li {
                margin: 0 10px;
            }

            .user-menu a {
                font-size: 14px;
            }
        }

        /* 分类导航 */
        .categories {
            padding: 30px 0;
            background-color: white;
            margin-bottom: 20px;
        }

        .categories h2 {
            text-align: center;
            margin-bottom: 20px;
            color: #2c3e50;
        }

        .category-list {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
        }

        .category-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 15px;
            transition: transform 0.3s;
            color: #34495e;
        }

        .category-item:hover {
            transform: translateY(-5px);
            color: #e74c3c;
        }

        .category-item i {
            font-size: 2rem;
            margin-bottom: 10px;
        }

        .category-item.highlight {
            background-color: #e74c3c;
            color: white;
            border-radius: 8px;
            padding: 15px;
            transform: scale(1.05);
            box-shadow: 0 5px 15px rgba(231, 76, 60, 0.3);
        }

        .category-item.highlight i {
            color: white;
        }

        .category-item.highlight:hover {
            background-color: #c0392b;
            transform: scale(1.08);
        }

        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            flex-wrap: wrap;
            gap: 15px;
        }

        .sort-options {
            display: flex;
            align-items: center;
        }

        .sort-label {
            margin-right: 8px;
            font-weight: 500;
            color: #2c3e50;
            white-space: nowrap;
        }

        .sort-select {
            padding: 8px 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background-color: white;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 14px;
            color: #2c3e50;
            min-width: 150px;
        }

        .view-all {
            color: #3498db;
            font-size: 15px;
            display: flex;
            align-items: center;
            transition: color 0.3s;
            white-space: nowrap;
        }

        .new-products {
            background-color: white;
            padding: 30px 0;
            margin-bottom: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        }

        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .section-header h2 {
            color: #2c3e50;
        }

        .view-all {
            color: #3498db;
            font-size: 15px;
            display: flex;
            align-items: center;
            transition: color 0.3s;
        }

        .view-all i {
            margin-left: 5px;
            font-size: 15px;
        }

        .view-all:hover {
            color: #2980b9;
        }


        .user-menu a:hover {
            color: #e74c3c;
            transition: color 0.3s;
        }

        .user-menu i {
            margin-right: 8px;
            font-size: 1.2rem;
        }

        .product-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
            gap: 30px;
        }

        .product-card {
            background-color: #fff;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s, box-shadow 0.3s;
            display: flex;
            flex-direction: column;
            height: 100%;
            min-height: 400px; /* 固定最小高度 */
        }

        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .product-image {
            position: relative;
            height: 300px;
            overflow: hidden;
            flex-shrink: 0; /* 防止图片区域被压缩 */
        }

        .product-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s;
        }

        .product-card:hover .product-image img {
            transform: scale(1.05);
        }

        .no-products {
            grid-column: 1 / -1;
            text-align: center;
            padding: 40px;
            color: #7f8c8d;
        }

        .no-products a {
            color: #3498db;
            margin-left: 5px;
        }

        .price {
            position: absolute;
            bottom: 5px;
            right: 5px;
            background-color: rgba(231, 76, 60, 0.9);
            color: white;
            padding: 8px 13px;
            border-radius: 10px;
            font-weight: bold;
            font-size: 1.5rem;
        }

        .product-info {
            padding: 20px;
            display: flex;
            flex-direction: column;
            flex-grow: 1;
            min-height: 180px; /* 固定信息区域最小高度 */
        }

        .product-info h3 {
            font-size: 1.1rem;
            margin: 0 0 8px 0;
            color: #2c3e50;
            min-height: 40px;
            max-height: 40px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            line-height: 1.2;
        }

        .description {
            color: #7f8c8d;
            font-size: 0.9rem;
            margin-bottom: 10px;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            flex-grow: 1;
            min-height: 60px;
        }


        .meta {
            display: flex;
            justify-content: space-between;
            font-size: 0.8rem;
            color: #95a5a6;
            white-space: nowrap; /* 防止文本换行 */
        }

        .meta span {
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 45%; /* 确保两个span不会挤压 */
        }

        .meta i {
            margin-right: 3px;
        }

        /* 页脚样式 */
        .footer {
            background-color: #2c3e50;
            color: #ecf0f1;
            padding: 40px 0 20px;
        }

        .success-message {
            color: #27ae60;
            text-align: center;
            margin: 30px 0;
            font-size: 1.1rem;
            padding: 15px;
            background-color: rgba(39, 174, 96, 0.1);
            border-radius: 8px;
            border-left: 5px solid #27ae60;
        }

        .error-message {
            color: #e74c3c;
            text-align: center;
            margin: 30px 0;
            font-size: 1.1rem;
            padding: 15px;
            background-color: rgba(231, 76, 60, 0.1);
            border-radius: 8px;
            border-left: 5px solid #e74c3c;
        }

        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
            margin-bottom: 30px;
        }

        .footer-section h3 {
            color: white;
            margin-bottom: 15px;
            font-size: 1.2rem;
        }

        .footer-section p {
            margin-bottom: 10px;
        }

        .footer-section ul {
            list-style: none;
        }

        .footer-section li {
            margin-bottom: 8px;
        }

        .footer-section a:hover {
            color: #e74c3c;
        }

        .footer-section i {
            margin-right: 8px;
            width: 20px;
            text-align: center;
        }

        .copyright {
            text-align: center;
            padding-top: 20px;
            border-top: 1px solid #34495e;
            font-size: 0.9rem;
            color: #bdc3c7;
        }

        .pagination {
            margin-top: 30px;
            text-align: center;
        }

        .page-link {
            padding: 8px 12px;
            margin: 0 5px;
            background: #e74c3c;
            color: white;
            border-radius: 4px;
            text-decoration: none;
            transition: background-color 0.3s;
        }

        .page-link:hover {
            background-color: #c0392b;
        }

        .current-page {
            padding: 8px 12px;
            margin: 0 5px;
            background: #2c3e50;
            color: white;
            border-radius: 4px;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .header .container {
                flex-direction: column;
            }

            .logo, .search-bar, .user-menu {
                width: 100%;
                margin-bottom: 15px;
            }

            .user-menu ul {
                justify-content: center;
            }

            .user-menu li {
                margin: 0 10px;
            }

            .category-list {
                justify-content: center;
            }

            .category-item {
                width: 25%;
                margin-bottom: 15px;
            }
        }

        @media (max-width: 480px) {
            .category-item {
                width: 33%;
            }

            .product-grid {
                grid-template-columns: 1fr;
            }
        }

        .product-actions {
            margin-top: 10px;
            display: flex;
            gap: 10px;
            position: relative;
            z-index: 2;
        }

        .btn-buy, .btn-cart {
            flex: 1;
            padding: 8px 0;
            text-align: center;
            border-radius: 4px;
            font-size: 14px;
            transition: all 0.3s;
        }

        .btn-buy {
            background-color: #e74c3c;
            color: white;
        }

        .btn-buy:hover {
            background-color: #c0392b;
        }

        .btn-cart {
            background-color: #f8f9fa;
            color: #333;
            border: 1px solid #ddd;
        }

        .btn-cart:hover {
            background-color: #e9ecef;
        }
    </style>
</head>
<body>
<!-- 顶部导航栏 -->
<header class="header">
    <div class="container">
        <div class="logo">
            <a href="${pageContext.request.contextPath}/home"><h1><i class="fas fa-recycle"></i> 校园二手市场</h1></a>
        </div>
        <!-- 修改搜索表单 -->
        <div class="search-bar">
            <form action="${pageContext.request.contextPath}/showAllProducts" method="get">
                <input type="text" name="keyword" placeholder="请输入产品名称或描述..." value="${param.keyword}">
                <button type="submit"><i class="fas fa-search"></i></button>
            </form>
        </div>
        <nav class="user-menu">
            <ul>
                <li>
                    <c:if test="${not empty user}">
                        <a href="${pageContext.request.contextPath}/userCenter"><i
                                class="fas fa-user"></i>&nbsp;${user.username}</a>
                    </c:if>
                    <c:if test="${empty user}">
                        <a href="${pageContext.request.contextPath}/login"><i class="fas fa-user"></i> 登录</a>
                    </c:if>
                </li>
                <c:if test="${empty user}">
                    <li><a href="${pageContext.request.contextPath}/register"><i class="fas fa-user-plus"></i> 注册</a>
                    </li>
                </c:if>
                <c:if test="${not empty user}">
                    <li><a href="${pageContext.request.contextPath}/orderCar"><i class="fas fa-shopping-cart"></i>
                        购物车</a></li>
                    <li><a href="${pageContext.request.contextPath}/productCenter"><i class="fas fa-box-open"></i> 我的商品</a>
                    </li>
                    <li><a href="${pageContext.request.contextPath}/productUpload"><i class="fas fa-plus-circle"></i>
                        发布商品</a></li>
                </c:if>
            </ul>
        </nav>
    </div>
</header>

<!-- 主要内容区 -->
<main class="main">
    <!-- 分类导航 -->
    <section class="categories">
        <div class="container">
            <h2>商品分类</h2>
            <div class="category-list">
                <a href="?categoryId=1" class="category-item ${categoryId eq 1 ? 'highlight' : ''}">
                    <i class="fas fa-book"></i>
                    <span>教材书籍</span>
                </a>
                <a href="?categoryId=2" class="category-item ${categoryId eq 2 ? 'highlight' : ''}">
                    <i class="fas fa-laptop"></i>
                    <span>电子产品</span>
                </a>
                <a href="?categoryId=3" class="category-item ${categoryId eq 3 ? 'highlight' : ''}">
                    <i class="fas fa-tshirt"></i>
                    <span>服装鞋帽</span>
                </a>
                <a href="?categoryId=4" class="category-item ${categoryId eq 4 ? 'highlight' : ''}">
                    <i class="fas fa-bicycle"></i>
                    <span>交通工具</span>
                </a>
                <a href="?categoryId=5" class="category-item ${categoryId eq 5 ? 'highlight' : ''}">
                    <i class="fas fa-home"></i>
                    <span>生活用品</span>
                </a>
                <a href="?categoryId=6" class="category-item ${categoryId eq 6 ? 'highlight' : ''}">
                    <i class="fas fa-music"></i>
                    <span>文体娱乐</span>
                </a>
                <a href="?categoryId=7" class="category-item ${categoryId eq 7 ? 'highlight' : ''}">
                    <i class="fas fa-ellipsis-h"></i>
                    <span>其他商品</span>
                </a>
            </div>
        </div>
    </section>

    <c:if test="${not empty errorInfo}">
        <div class="error-message">${errorInfo}</div>
    </c:if>

    <c:if test="${not empty addCarItemError}">
        <div class="error-message">${addCarItemError}</div>
    </c:if>

    <c:if test="${not empty addCarItemSuccess}">
        <div class="success-message">${addCarItemSuccess}</div>
    </c:if>

    <!-- 最新发布 -->
    <section class="new-products">
        <div class="container">
            <div class="section-header">
                <c:choose>
                    <c:when test="${not empty keyword}">
                        <h2>搜索结果: "${keyword}"</h2>
                    </c:when>
                    <c:otherwise>
                        <a href="${pageContext.request.contextPath}/showAllProducts"><h2>全部商品</h2></a>
                    </c:otherwise>
                </c:choose>
                <div class="sort-options">
                    <label for="sort-select" class="sort-label">排序:</label>
                    <select id="sort-select" class="sort-select" onchange="location = this.value;">
                        <option value="?keyword=${keyword}&sort=time_desc&page=${currentPage}&size=${pageSize}&categoryId=${categoryId}"
                        ${sort == 'time_desc' ? 'selected' : ''}>
                            最新发布 ↓
                        </option>
                        <option value="?keyword=${keyword}&sort=time_asc&page=${currentPage}&size=${pageSize}&categoryId=${categoryId}"
                        ${sort == 'time_asc' ? 'selected' : ''}>
                            最早发布 ↑
                        </option>
                        <option value="?keyword=${keyword}&sort=price_asc&page=${currentPage}&size=${pageSize}&categoryId=${categoryId}"
                        ${sort == 'price_asc' ? 'selected' : ''}>
                            价格从低到高 ↑
                        </option>
                        <option value="?keyword=${keyword}&sort=price_desc&page=${currentPage}&size=${pageSize}&categoryId=${categoryId}"
                        ${sort == 'price_desc' ? 'selected' : ''}>
                            价格从高到低 ↓
                        </option>
                    </select>
                </div>
                <a href="${pageContext.request.contextPath}/" class="view-all">返回首页 <i class="fas fa-home"></i></a>
            </div>
            <div class="product-grid">
                <c:choose>
                    <c:when test="${empty products}">
                        <div class="no-products">暂无商品，快去<a
                                href="${pageContext.request.contextPath}/productUpload">发布</a>吧~
                        </div>
                    </c:when>
                    <c:otherwise>
                        <c:forEach items="${products}" var="product" end="7">
                            <div class="product-card" onclick="handleCardClick(${product.productId})">
                                <div class="product-image">
                                    <img src="${pageContext.request.contextPath}/productPictures/${product.productId}/${product.imageUrl}"
                                         onerror="this.src='${pageContext.request.contextPath}/default-product.webp'">
                                    <span class="price">¥&nbsp;<fmt:formatNumber value="${product.price}"
                                                                                 pattern="0.00"/></span>
                                </div>
                                <div class="product-info">
                                    <h3>${product.title}</h3>
                                    <p class="description">${product.description}</p>
                                    <div class="meta">
                                        <span><i class="fas fa-user"></i>&nbsp;${userUtils.getRealName(product.userId)}</span>
                                        <span class="time-ago"
                                              data-timestamp="<fmt:formatDate value="${product.createTime}" pattern="yyyy-MM-dd HH:mm:ss" />">
                                            <i class="fas fa-clock"></i>&nbsp;计算中...
                                        </span>
                                    </div>
                                    <div class="product-actions">
                                        <a href="${pageContext.request.contextPath}/confirmOrder?productId=${product.productId}"
                                           class="btn-buy">立即购买</a>
                                        <a href="${pageContext.request.contextPath}/addCarItem?productId=${product.productId}"
                                           class="btn-cart">加入购物车</a>
                                    </div>
                                </div>
                            </div>
                        </c:forEach>
                    </c:otherwise>
                </c:choose>
            </div>
            <%--            分页控件--%>
            <div class="pagination" style="margin-top: 30px; text-align: center;">
                <c:if test="${totalPages == 1}">
                        <span class="current-page"
                              style="padding: 8px 12px; margin: 0 5px; background: #2c3e50; color: white; border-radius: 4px;">
                            1
                        </span>
                </c:if>
                <c:if test="${totalPages > 1}">
                    <!-- 首页和上一页 -->
                    <c:if test="${currentPage > 1}">
                        <a href="?keyword=${keyword}&sort=${sort}&page=1&size=${pageSize}&categoryId=${categoryId}"
                           class="page-link"
                           style="padding: 8px 12px; margin: 0 5px; background: #e74c3c; color: white; border-radius: 4px; text-decoration: none;">
                            首页
                        </a>
                        <a href="?keyword=${keyword}&sort=${sort}&page=${currentPage - 1}&size=${pageSize}&categoryId=${categoryId}"
                           class="page-link"
                           style="padding: 8px 12px; margin: 0 5px; background: #e74c3c; color: white; border-radius: 4px; text-decoration: none;">
                            上一页
                        </a>
                    </c:if>

                    <!-- 页码显示逻辑 -->
                    <c:choose>
                        <c:when test="${totalPages <= 3}">
                            <!-- 总页数≤3时显示所有页码 -->
                            <c:forEach begin="1" end="${totalPages}" var="i">
                                <c:choose>
                                    <c:when test="${i == currentPage}">
                            <span class="current-page"
                                  style="padding: 8px 12px; margin: 0 5px; background: #2c3e50; color: white; border-radius: 4px;">
                                    ${i}
                            </span>
                                    </c:when>
                                    <c:otherwise>
                                        <a href="?keyword=${keyword}&sort=${sort}&page=${i}&size=${pageSize}&categoryId=${categoryId}"
                                           class="page-link"
                                           style="padding: 8px 12px; margin: 0 5px; background: #e74c3c; color: white; border-radius: 4px; text-decoration: none;">
                                                ${i}
                                        </a>
                                    </c:otherwise>
                                </c:choose>
                            </c:forEach>
                        </c:when>
                        <c:otherwise>
                            <!-- 总页数>5时的智能分页显示 -->
                            <c:set var="startPage" value="${currentPage - 1}"/>
                            <c:set var="endPage" value="${currentPage + 1}"/>
                            <!-- 调整起始页 -->
                            <c:if test="${startPage < 1}">
                                <c:set var="startPage" value="1"/>
                                <c:set var="endPage" value="3"/>
                            </c:if>
                            <!-- 调整结束页 -->
                            <c:if test="${endPage > totalPages}">
                                <c:set var="endPage" value="${totalPages}"/>
                                <c:set var="startPage" value="${totalPages - 2}"/>
                            </c:if>
                            <!-- 显示当前页附近的3个页码 -->
                            <c:forEach begin="${startPage}" end="${endPage}" var="i">
                                <c:choose>
                                    <c:when test="${i == currentPage}">
                                        <!--高亮显示-->
                                        <span class="current-page"
                                              style="padding: 8px 12px; margin: 0 5px; background: #2c3e50; color: white; border-radius: 4px;">
                                                ${i}
                                        </span>
                                    </c:when>
                                    <c:otherwise>
                                        <a href="?keyword=${keyword}&sort=${sort}&page=${i}&size=${pageSize}&categoryId=${categoryId}"
                                           class="page-link"
                                           style="padding: 8px 12px; margin: 0 5px; background: #e74c3c; color: white; border-radius: 4px; text-decoration: none;">
                                                ${i}
                                        </a>
                                    </c:otherwise>
                                </c:choose>
                            </c:forEach>
                        </c:otherwise>
                    </c:choose>
                    <!-- 下一页和尾页 -->
                    <c:if test="${currentPage < totalPages}">
                        <a href="?keyword=${keyword}&sort=${sort}&page=${currentPage + 1}&size=${pageSize}&categoryId=${categoryId}"
                           class="page-link"
                           style="padding: 8px 12px; margin: 0 5px; background: #e74c3c; color: white; border-radius: 4px; text-decoration: none;">
                            下一页
                        </a>
                        <a href="?keyword=${keyword}&sort=${sort}&page=${totalPages}&size=${pageSize}&categoryId=${categoryId}"
                           class="page-link"
                           style="padding: 8px 12px; margin: 0 5px; background: #e74c3c; color: white; border-radius: 4px; text-decoration: none;">
                            尾页
                        </a>
                    </c:if>
                </c:if>
            </div>
        </div>
    </section>
</main>

<!-- 页脚 -->
<footer class="footer">
    <div class="container">
        <div class="footer-content">
            <div class="footer-section">
                <h3>关于我们</h3>
                <p>校园二手市场致力于为同学们提供安全、便捷的二手交易平台，促进资源循环利用。</p>
            </div>
            <div class="footer-section">
                <h3>快速链接</h3>
                <ul>
                    <li><a href="${pageContext.request.contextPath}/home">首页</a></li>
                    <li><a href="${pageContext.request.contextPath}/productUpload">发布商品</a></li>
                    <li><a href="${pageContext.request.contextPath}/showAllOrder">我的订单</a></li>
                </ul>
            </div>
            <div class="footer-section">
                <h3>联系我们</h3>
                <p><i class="fas fa-envelope"></i> 2424717883@qq.com</p>
                <p><i class="fas fa-phone"></i> 17868292884</p>
            </div>
        </div>
        <div class="copyright">
            <p>&copy; 2025 CB 校园二手市场 版权所有</p>
        </div>
    </div>
</footer>
</body>

<script>
    function handleCardClick(productId) {
        window.location.href = '${pageContext.request.contextPath}/showProductInfo?productId=' + productId;
    }

    function updateTimeAgo() {
        document.querySelectorAll('.time-ago').forEach(element => {
            const timestamp = element.getAttribute('data-timestamp');
            if (timestamp) {
                const createTime = new Date(timestamp);
                const now = new Date();
                const diffInSeconds = Math.floor((now - createTime) / 1000);

                let timeText;
                if (diffInSeconds < 60) {
                    timeText = diffInSeconds + "秒前";
                } else if (diffInSeconds < 3600) {
                    const minutes = Math.floor(diffInSeconds / 60);
                    timeText = minutes + "分钟前";
                } else if (diffInSeconds < 86400) {
                    const hours = Math.floor(diffInSeconds / 3600);
                    timeText = hours + "小时前";
                } else {
                    const days = Math.floor(diffInSeconds / 86400);
                    timeText = days + "天前";
                }

                element.innerHTML = '';
                const icon = document.createElement('i');
                icon.className = 'fas fa-clock';
                element.appendChild(icon);
                element.appendChild(document.createTextNode('\u00A0' + timeText));
            }
        });
    }

    // 页面加载后立即计算
    document.addEventListener('DOMContentLoaded', updateTimeAgo);

    // 每分钟更新一次（适合动态内容）
    setInterval(updateTimeAgo, 60000);
</script>
</html>